@import '../../style/var.styl'
.workIM-wrap
  border: 1px solid #d9d9d9
  height: calc(100vh - 126px)
  // index
  .left 
    float: left
    width: 280px
    height: 100%
  .leftTop 
    height: 100px
    background: #e6e6e6
    border-bottom: 1px solid #d6d6d6
    .ant-select-selection--single
      border-radius: 0px
    .ant-input:first-child
      border-radius: 0px
    .ant-input-group-addon
      border-radius: 0px
  .leftBottom 
    height: calc(100% - 100px)
    background: #e6e6e6
    overflow: auto
  .right 
    float: right
    width: calc(100% - 280px)
    height: 100%
  .rightTop 
    height: calc(100% - 200px)
    overflow: auto
    background: #f9f9f9
    border-bottom: 1px solid #eee
  .rightBottom 
    height: 200px
    background: #fff
  
  // chatterList
  .chatters:hover 
    background: #f0f0f0
  .chatters-active 
    background: #f9f9f9 !important

  // messageList
  .leftAlign 
    margin: 5px 0
    display: flex
    align-items: flex-start
    flex-direction: row
  .rightAlign 
    margin: 5px 0
    display: flex
    align-items: flex-start
    flex-direction: row-reverse
  .message
    max-width: 40%
    position: relative
    border: 1px solid #eee
    border-radius: 4px
    line-height: 18px
    padding: 7px
    color: #333
  .leftMessage
    @extends .workIM-wrap .message
    margin-left: 12px
  .rightMessage
    @extends .workIM-wrap .message
    margin-right: 12px
  .arrow
    width: 10px
    height: 10px
    position: absolute
    content: ''
    top: 10px
    transform: rotate(45deg)
    -webkit-transform: rotate(45deg)
  .leftArrow
    @extends .workIM-wrap .arrow
    left: -6px
    border-left: 1px solid #eee
    border-bottom: 1px solid #eee
  .rightArrow
    @extends .workIM-wrap .arrow
    right: -6px
    border-right: 1px solid #eee
    border-top: 1px solid #eee
  .timestamp 
    font-size: 12px
    color: #999

  .leftTextItem
    @extends .workIM-wrap .leftMessage
    background: $white
  .rightTextItem
    @extends .workIM-wrap .rightMessage
    background: $white
  .leftTextArrow
    @extends .workIM-wrap .leftArrow
    background: $white
  .rightTextArrow
    @extends .workIM-wrap .rightArrow
    background: $white
    
  .leftDeliverReceiptItem 
    @extends .workIM-wrap .leftMessage
    background: $yellow
  .rightDeliverReceiptItem 
    @extends .workIM-wrap .rightMessage
    background: $yellow
  .leftDeliverReceiptArrow 
    @extends .workIM-wrap .leftArrow
    background: $yellow
  .rightDeliverReceiptArrow 
    @extends .workIM-wrap .rightArrow
    background: $yellow

  .leftSuppleItem 
    @extends .workIM-wrap .leftMessage
    background: $red
  .rightSuppleItem 
    @extends .workIM-wrap .rightMessage
    background: $red
  .leftSuppleArrow 
    @extends .workIM-wrap .leftArrow
    background: $red
  .rightSuppleArrow 
    @extends .workIM-wrap .rightArrow
    background: $red

  .loading
    margin: 5px;

  // submitArea
  .submitTabs .ant-tabs-bar
    margin: 0 0 6px 0
  .deliverForm 
    height: 104px
    .ant-form-item
      display: flex
    .ant-form-item-control-wrapper
      flex: 1
    .ant-form-item
      margin: 5px 0
  .recepitTable
    padding: 5px
    &:hover
      color: #1890ff
      cursor pointer
.ant-popover-inner-content
  padding: 6px !important
.message-operation
  display: flex
  font-size: 22px;
  flex-direction: row
  li
    margin: 0 2px
    padding: 0 8px
    cursor: pointer
    &:hover
      background: #eee
    
    
